<template>
    <div class="add">
        <h1>添加新联系人</h1>
        <table width="100%">
            <tbody>
                <tr>
                    <td>姓名</td>
                    <td><input type="text" v-model="form.name"  /></td>
                </tr>
                <tr>
                    <td>年龄</td>
                    <td><input type="text" v-model="form.age" /></td>
                </tr>
                <tr>
                    <td>性别</td>
                    <td><input type="radio" value="M" v-model="form.gender" />男 <input type="radio" value="F" v-model="form.gender" />女</td>
                </tr>
                <tr>
                    <td>描述</td>
                    <td><textarea v-model="form.desc"></textarea></td>
                </tr>
                <tr>
                    <td></td>
                    <td><button class="btn-add" @click="add">添加</button></td>
                </tr>
            </tbody>
        </table>
    </div>
</template>
<script>
    import { mapGetters, mapActions} from 'vuex';
    export default {
        data(){
            return{
                form:{
                    name:'',
                    age:'',
                    gender:'',
                    desc:''
                }
            };
        },
        computed:{
            ...mapGetters([
                'count'
            ]),
        },
        methods:{
            ...mapActions([
                'addContact',
            ]),
            add(){
                var _this = this;
                _this.addContact(this.form)
                .then(function(data){
                    alert('新增联系人成功');
                    _this.$router.replace({name:'contactdetail',params:{contactId:data.contactId}})
                })
            }
        }
    }
</script>
<style scoped>
    .add{font-size:1.25em; }
    .add h1{font-size:1.5em; text-align:center }
    .add tr td{padding:.6em 0;}
    .add tr td:first-child{width:25%;text-align:right; padding-right:.5em;}
    .btn-add{font-size:1.5em; padding:0 .6em;}

</style>